@use "sass:math";
@use "sass:map";
@use "sass:color";
@use "./var.scss";
@mixin set-color-mix-level($type) {
    $mix-color: map.get(var.$colors, $type);

    @for $i from 3 through 9 {
        $p: math.percentage(math.div(10-$i, 10));
        $color: color.mix($mix-color, var.$color-white, $p);
        --jk-color-#{$type}-light-#{$i}: #{$color};
    }

    --jk-color-#{$type}-dark-2: #{color.mix($mix-color, var.$color-black, 80%)};
}

@mixin color-vars {
    --jk-color-primary: #{var.$color-primary};
    @include set-color-mix-level(primary);
    --jk-color-success: #{var.$color-success};
    @include set-color-mix-level(success);
    --jk-color-warning: #{var.$color-warning};
    @include set-color-mix-level(warning);
    --jk-color-danger: #{var.$color-danger};
    @include set-color-mix-level(danger);
    --jk-color-info: #{var.$color-info};
    @include set-color-mix-level(info);

    //font
    --jk-color-text-primary: #303133;
    --jk-color-text-regular: #606266;
    --jk-color-text-secondary: #909399;
    --jk-color-text-placeholder: #c0c4cc;
    --jk-tooltip-background: var(--jk-color-text-primary);
    --jk-background-color-base: #f5f7fa;
    --jk-background-color-default: #fff;
    --jk-scrollbar-background-color: rgba(144, 147, 153, 0.3);
    --jk-scrollbar-hover-background-color: rgba(144, 147, 153, 0.6);
}
